<template>
  <div class="home">
    <div class="button-groub" :class="show ? '' : 'hide-groub'">
      <div class="button" @click="handleAddSupermapTiled()">
        添加supermap瓦片服务
      </div>
      <div class="button" @click="handleAddSupermapVectortile()">
        添加supermap矢量瓦片服务
      </div>
      <div class="button" @click="handleAddArcgisTile()">
        添加arcgis瓦片服务
      </div>
      <div class="button" @click="handleAddArcgisDynamic()">
        添加arcgis要素服务服务
      </div>
      <div class="button" @click="handleAddOgcWms()">添加ogc-wms服务</div>
      <div class="button" @click="handleAddOgcWmts()">添加ogc-wmts服务</div>
      <div class="button-show" @click="swichShow">展开</div>
    </div>
    <div id="map" class="map-con"></div>
  </div>
</template>

<script>
import HdecTransform from 'hdec-transform/dist/HdecTransform';
import axios from 'axios';
// import { toGeoJSON } from 'arcgis-to-geojson-utils';
// import MapboxGeocoder from 'mapbox-gl-geocoder';
let map = null;
export default {
  name: 'Home',
  components: {},
  data() {
    return {
      show: false,
    };
  },
  mounted() {
    console.log(
      HdecTransform.epsgTrans('EPSG:4549', 'EPSG:4326', 462670.82, 4687692.03),
    );
    this.inits();
  },
  methods: {
    inits() {
      map = new mapboxgl.Map({
        container: 'map',
        style: {
          version: 8,
          sources: {
            'raster-tiles': {
              type: 'raster',
              tiles: [
                'https://iserver.supermap.io/iserver/services/map-china400/rest/maps/China/zxyTileImage.png?z={z}&x={x}&y={y}',
              ],
              tileSize: 256,
            },
          },
          layers: [
            {
              id: 'simple-tiles',
              type: 'raster',
              source: 'raster-tiles',
            },
          ],
        },
        // center: [120.12352237311012, 30.23956931881989],
        // zoom: 10,
        // minZoom: 9.5,
        // zoom: 10.8,
        // minZoom: 0,
        // maxZoom: 18,
        // crs: "EPSG:4326",
      });
      const that = this;
      map.on('dragend', function () {
        const mapBounds = map.getBounds();
        const bounds = [
          [119.536187499, 29.9123967376],
          [121.0160913482, 30.6477941897],
        ];
        if (!that.boundsContains(mapBounds, bounds)) {
          map.fitBounds(bounds, { padding: 20 });
        }
      });
    },
    // ogc-wms
    handleAddOgcWms() {
      const layer = map.getSource('wms-layer');
      if (!layer) {
        map.addLayer({
          id: 'wms-layer',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              'http://219.142.81.85/arcgis/rest/services/10wanZH/MapServer/WMTS?' +
                'SERVICE=WMTS' +
                '&REQUEST=GetTile' +
                '&VERSION=1.0.0' +
                '&LAYER=10wanZH' +
                '&STYLE=default' +
                '&TILEMATRIXSET=default' +
                '&FORMAT=image/png' +
                '&TILECOL=' +
                '{x}' +
                '&TILEROW=' +
                '{y}' +
                '&TILEMATRIX=' +
                '{z}',
            ],
            tileSize: 512,
            mapgisOffset: -1,
          },
          paint: {},
        });
      } else {
        map.removeLayer('wms-layer');
        map.removeSource('wms-layer');
      }
    },
    // ogc-wmts
    handleAddOgcWmts() {
      const layer = map.getSource('wmts-layer');
      if (!layer) {
        map.addLayer({
          id: 'wms-layer',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              `http://219.142.81.85/arcgis/services/20wanHT/MapServer/WMS?` +
                'service=WMS' +
                '&request=GetMap' +
                '&layers=' +
                '0,1,2,3,5,7,9,11' +
                '&styles=' +
                '&format=image/png' +
                '&transparent=true' +
                '&version=1.3.0' +
                '&height=512' +
                '&width=512' +
                '&crs=EPSG:4326' +
                '&bbox={bbox}' +
                '&reversebbox=true',
            ],
            tileSize: 512,
          },
          paint: {},
        });
      } else {
        map.removeLayer('wms-layer');
        map.removeSource('wms-layer');
      }
    },
    // supermap-tile
    handleAddSupermapTiled() {
      const layer = map.getSource('supermap-tiled');
      if (!layer) {
        map.addLayer({
          id: 'supermap-tiled',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              // "http://172.18.110.23:8090/iserver/services/map-ZeRenShuJu/rest/maps/%E8%B4%A3%E4%BB%BB%E6%95%B0%E6%8D%AE/zxyTileImage.png?x={x}&y={y}&z={z}&transparent=true",
              'https://kjzzyy.hzsgis.com/Ip18-94-7/iserver/services/map-DiMianChenJiangFengXianTu/rest/maps/%E5%9C%B0%E9%9D%A2%E6%B2%89%E9%99%8D%E9%A3%8E%E9%99%A9%E5%9B%BE/zxyTileImage.png?x={x}&y={y}&z={z}&transparent=true',
            ],
            tileSize: 256,
            minzoom: 0,
            maxzoom: 22,
          },
          layout: {
            visibility: 'visible',
          },
          paint: {},
        });
      } else {
        map.removeLayer('supermap-tiled');
        map.removeSource('supermap-tiled');
      }
    },
    // supermap-vectortile
    handleAddSupermapVectortile() {
      const layer = map.getSource('supermap-tiled');
      if (!layer) {
        axios
          .get(
            'http://172.18.110.23:8090/iserver/services/map-mvt-ZiRanZhuangJuWaiXianXia/restjsr/v1/vectortile/maps/ZiRanZhuangJuWaiXianXia/style.json',
            // "http://172.18.101.152:8080/iserver/services/map-mvt-GuShuMingMu/restjsr/v1/vectortile/maps/%E5%8F%A4%E6%A0%91%E5%90%8D%E6%9C%A8/style.json"
          )
          .then((res) => {
            const data = res.data;
            map.addSource(data.name, data.sources[data.name]);
            data.layers.forEach((v, i) => {
              if (i !== 0) {
                map.addLayer(v);
              }
            });
          });
      } else {
        map.removeLayer('ZiRanZhuangJuWaiXianXia');
        map.removeSource('ZiRanZhuangJuWaiXianXia');
      }
    },
    // argis-dynamic
    handleAddArcgisDynamic() {
      const layer = map.getSource('featurelayer-layer');
      if (!layer) {
        map.addLayer({
          id: 'featurelayer-layer',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              `https://kjzzyy.hzsgis.com:8082/Ip104-1-6080/arcgis/rest/services/GCS330100_3003_TDGY/GCS330100_3003_TDGY_GDDK/MapServer/export?` +
                'F=image' +
                '&FORMAT=PNG32' +
                '&TRANSPARENT=true' +
                '&LAYERS=show:0' +
                '&SIZE=512,512' +
                '&bbox=118.47656249999999%2C29.179687500000004%2C118.82812499999997%2C29.53125' +
                '&BBOXSR=4326' + // 即便这个地方是4547,也得设置成4326/4490，
                '&IMAGESR=4326' + // 请看右侧markdown说明
                '&DPI=90',
            ],
            tileSize: 512,
          },
          paint: {},
        });
      } else {
        map.removeLayer('featurelayer-layer');
        map.removeSource('featurelayer-layer');
      }
    },
    // arcgis-tile
    handleAddArcgisTile() {
      const layer = map.getSource('arcgis-tile-layer');
      if (!layer) {
        map.addLayer({
          id: 'arcgis-tile-layer',
          type: 'raster',
          source: {
            type: 'raster',
            tiles: [
              'https://kjzzyy.hzsgis.com:8082/Ip109-232-8080/C1DC5DAA62D342D7B5395525C7AD4BB96EB680B39B9DE1B4DA44307B9450FC5700C42E754F5CC4A6071252ECD95372D8/PBS/rest/services/hzsyraster2022/Mapserver/tile/{z}/{y}/{x}',
            ],
            tileSize: 512,
            mapgisOffset: -1,
          },
          paint: {},
        });
      } else {
        map.removeLayer('arcgis-tile-layer');
        map.removeSource('arcgis-tile-layer');
      }
    },
    // 该函数用于检查地图范围是否包含在指定的边界框范围内
    boundsContains(mapBounds, bounds) {
      var sw = bounds[0];
      var ne = bounds[1];
      return (
        mapBounds.getSouth() >= sw[1] &&
        mapBounds.getNorth() <= ne[1] &&
        mapBounds.getWest() >= sw[0] &&
        mapBounds.getEast() <= ne[0]
      );
    },
    swichShow() {
      this.show = !this.show;
    },
  },
};
</script>

<style scoped>
.map-con {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
.home {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.button-groub {
  position: absolute;
  left: 0px;
  top: 30px;
  background: #686868;
  display: flex;
  align-items: center;
  z-index: 1;
  justify-content: space-around;
  width: 300px;
  border-radius: 5px;
  flex-wrap: wrap;
  transition: 0.5s;
}
.hide-groub {
  left: -300px;
}
.button {
  margin: 10px 10px;
  background: rgb(36, 175, 255);
  color: white;
  text-align: center;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.5s;
  width: 270px;
}
.button-show {
  position: absolute;
  width: 30px;
  height: 30px;
  background: rgb(56, 56, 56);
  color: white;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.button:hover {
  background: #006db6;
}
</style>
